<template>
  <div>
      <img src="~/static/guangchang/padding2.png" alt=""
        style="width:3.5rem;hieght:3.5rem;position:fixed;bottom:4.5rem;right:1.25rem;z-index:9999;" @click="gofabu(0)">
    <div style="background-color: #ffffff;border-radius:.75rem;margin-top:1.375rem;padding:1rem .75rem;">
      <div style="display: flex;align-items: center;justify-content: center;">
        <img src="~/static/zixun/basic1.png" alt="" style="width:2.5rem;height:2.5rem;border-radius:50%;">
        <div style="margin-left:.75rem">
          <div style="display:flex;align-items:center;">
            <div style="font-size:.75rem;color: #17181A;font-weight: bold;">用户昵称用户昵称</div>
            <img src="~/static/guangchang/userbadge.png" alt="" style="width:2.575rem;height: .75rem;margin-left:.25rem;">
          </div>
  
          <div style="font-size: 11px;color: #AEB0B3;">4分钟前</div>
        </div>
        <div class="guanzhu">+&nbsp;关注</div>
      </div>
      <div class="truncate">
        一贴看懂猫猫包配队
        猫猫包配队第一要素 - 主猫技能:
        主猫技能在3代猫猫包前不太重要, 7级炉子后迎来第一个强势猫猫包技能：我们联合（库卡）。
        而在能合成出UR猫猫包后，迎来了UR库卡（7级解锁）、UR华夫（8级解锁）、UR粉酪（9级解锁）
        即我们的主猫位置必定是以上四个猫之一，没有其他选择，哪怕开不出风味也要上。（纯坦可考虑其他主猫技）
      </div>
      <div style="margin-top: .8125rem;">
        <iframe src="https://player.bilibili.com/player.html?bvid=BV1wx4y1s7VQ" width="100%" frameborder="0"
          allowfullscreen="true" style="border-radius: .9375rem;"></iframe>
      </div>
      <van-grid :border="false" :column-num="3">
        <van-grid-item v-for="(item,idnex) in telimages" :key="idnex">
          <van-image :src="item" />
        </van-grid-item>
      </van-grid>
      <div
        style="display: flex;align-items: center;justify-content: center;margin-top: .8925rem;justify-content: space-between;">
        <div style="display:flex;flex-direction: column;align-items: center;jsutify-content: center;">
          <img src="~/static/zixun/basic1.png" alt="" style="width: 1.0625rem;height: 1rem;">
          <div style="color: #7B7D80;font-size: .625rem;">119浏览</div>
        </div>
        <div style="display:flex;align-items: center;jsutify-content: center;">
          <div style="display:flex;flex-direction: column;align-items: center;jsutify-content: center;">
            <img src="~/static/zixun/basic2.png" alt="" style="width: 1.0625rem;height: 1rem;">
            <div style="color: #7B7D80;font-size: .625rem;">4评论</div>
          </div>
          <div
            style="display:flex;flex-direction: column;align-items: center;jsutify-content: center;margin-left: .8125rem;">
            <img src="~/static/zixun/basic2.png" alt="" style="width: 1.0625rem;height: 1rem;">
            <div style="color: #7B7D80;font-size: .625rem;">21点赞</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      value: '',
      telimages: ['https://img01.yzcdn.cn/vant/apple-1.jpg', 'https://img01.yzcdn.cn/vant/apple-2.jpg', 'https://img01.yzcdn.cn/vant/apple-3.jpg']
    }
  },
  methods: {
    gofabu(e) {
      this.$nuxt.$router.push({ path: '/fabu', query: { e: e } });
    },
    getNewssss(index) {
      this.titleType = index;
    }
  }
}
  </script>
  <style scoped>
.xuanzhongdian {
    width: .375rem;
    height: .375rem;
    margin: 0 auto;
    background: #ff7500;
    box-shadow: .0625rem .0625rem .1875rem 0rem rgba(242, 120, 16, 0.32);
    border-radius: 50%;
    /* Simplify border-radius */
    position: absolute;
    left: 46%;
    bottom: -30%;
  }
  
  .active {
    font-weight: bold;
  }
  
  .guanzhu {
    width: 4.125rem;
    height: 1.625rem;
    border-radius: 4.25rem;
    border: 1px solid #2E3033;
    text-align: center;
    line-height: 1.625rem;
    font-weight: bold;
    margin-left: 4rem;
  }
  
  .truncate {
    color: #47494DFF;
    font-size: .9375rem;
    width: 100%;
    margin-top: .8125rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* 显示最多两行 */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    line-height: 1.5;
    /* 根据需要调整行高 */
  }
</style>